<template>
	<view class="opAdd">
		<view class="part">
			<view class="title">自提地址</view>
			<view class="forms">
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">昵称</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" placeholder="请输入团长昵称" @blur="checkForm" v-model="receiver" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">手机号</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="number" placeholder="请输入手机号码" @blur="checkForm" v-model="phone" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">所在地区</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt" @tap='chooseAdd'>
							<input type="text" placeholder="请选择所在地区" v-model="address" disabled placeholder-style="color:#999999;">
							<!-- <picker mode="region" @change="selAdd">
								<input type="text" placeholder="请选择所在地区" v-model="address" disabled placeholder-style="color:#999999;">
							</picker> -->
						</view>
						<view class="rightIcon imgPublic">
							<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/rightIcon.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">详细地址</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" placeholder="请输入详细地址" @blur="checkForm" v-model="address_detail" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
				<view class="line dFlex jBetween_aCenter">
					<text class="lineTit">自提点名称</text>
					<view class='lineVal dFlex jEnd_aCenter'>
						<view class="ipt">
							<input type="text" v-model="store_name" placeholder="请输入自提点名称" placeholder-style="color:#999999;">
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="part">
			<view class="title">自提点照片</view>
			<view class="imgs dFlex jStart_aStart fWap">
				<view class="imgOne imgPublic" v-for="(item,index) in images" :key='index'>
					<image :src="item" mode="widthFix" @tap.stop='lookBig(item)'></image>
					<view class="del imgPublic" @tap.stop='delImg(index)' >
						<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/del.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="upTool imgPublic" v-if="images.length<1" @tap='upImg'>
					<image src="https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/upTool.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="loginBtn" @tap='saveInfo'>保存</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address_id:"",
				receiver:'',
				phone:'',
				address:'',
				address_detail:'',
				datas:{},
				images:[],
				lat:'',
				lng:'',
				store_name:'',
			};
		},
		onLoad(e) {
			this.initData();
		},
		onShareAppMessage() {
			this.tool.monitor();
			return {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			} 
		},
		onShareTimeline() {
			this.tool.monitor();
			let share = {
				title:'加一精选',
				path:'/pages/seller',
				imageUrl:'https://zl-tuangou.oss-cn-qingdao.aliyuncs.com/cMini/logo.png',
				desc:'这里有众多优质好物等您来选择',
			}
			return share;
		},
		methods:{
			// 个人中心数据
			initData(){
				this.tool.getData('/api/user/info',{}).then(res=>{
					console.log(res);
					if(res){
						this.address_id = res.address_id && res.address_id != '-'?res.address_id:'0';
						this.address = res.address;
						this.address_detail = res.address_detail;
						this.receiver = res.receiver;
						this.phone = res.phone;
						this.store_name = res.store_name;
						this.images = res.store_imgs?res.store_imgs.split(','):[];
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 保存地址
			saveInfo(){
				if(!this.receiver){
					uni.showToast({
						title:'请输入收件人姓名',
						icon:"none"
					})
					return;
				}
				if(!(/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone))){
					uni.showToast({
						title:'手机号格式不正确',
						icon:"none"
					})
					return;
				}
				if(!this.address){
					uni.showToast({
						title:'请选择所在地区',
						icon:"none"
					})
					return;
				}
				if(!this.address_detail){
					uni.showToast({
						title:'请输入详细地址',
						icon:"none"
					})
					return;
				}
				if(!this.images.length){
					uni.showToast({
						title:'至少上传一张自提点图片',
						icon:"none"
					})
					return;
				}
				this.tool.getData('/api/user/saveTeamAddress',{
					is_team:"2",
					receiver:this.receiver,
					phone:this.phone,
					address:this.address,
					address_detail:this.address_detail,
					is_default:'0',
					address_id:this.address_id?this.address_id:'',
					store_name:this.store_name,
					store_imgs:this.images.join(','),
				}).then(res=>{
					if(res){
						uni.showToast({
							title:"信息保存成功",
							icon:'success'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1650)
					}
				}).catch(err=>{
					console.log(err);
				})
			},
			// 上传图片
			upImg(){
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success:(res)=>{
						if(res.tempFilePaths.length){
							res.tempFilePaths.map((item,index)=>{
								this.tool.upImg(item).then(thumb=>{
									console.log(thumb);
									if(thumb){
										this.images.push(thumb.fullurl);
									}
								}).catch(err=>{
									console.log(err);
								})
							})
						}
					},
					fail:(err)=>{
						uni.showToast({
							title:"图片选择失败",
							icon:"none"
						})
					}
				})
			},
			// 删除图片
			delImg(idx){
				this.images.splice(idx,1);
			},
			// 查看大图
			lookBig(url){
				uni.previewImage({
					current:url,
					urls:this.images,
				})
			},
			// 检查字段是否填写完成
			checkForm(){
				if(!this.receiver || !this.address || !this.address_detail || !this.phone){
					this.flag = false;
					this.flag2 = true;
				}else if(this.receiver && this.address && this.address_detail && this.phone){
					this.flag = true;
					this.flag2 = false;
				}
			},
			// 选择省市区
			selAdd(e){
				this.address = e.detail.value.join('_');
				this.checkForm();
			},
			// 选择所在地区
			chooseAdd(){
				uni.chooseLocation({
					success: (locate) => {
						if(locate.errMsg == 'chooseLocation:ok'){
							var reg = /.+?(省|市|自治区|自治州|县|区)/g;
							this.address = locate.address.match(reg).join('_');
							this.address_detail = locate.name;
							this.lat = locate.latitude;
							this.lng = locate.longitude;
						}
					},
					fail:(err)=>{
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F6F6F6;
	}
	.opAdd{
		width: 100%;
		padding: 12px 3.2%;
		box-sizing: border-box;
		.loginBtn{
			width: 74.4%;
			left: 12.8%;
			padding: 22rpx 0;
			background: linear-gradient(180deg, #FC9700 0%, #FF5000 100%);
			position: fixed;
			bottom: 32px;
			text-align: center;
			border-radius: 40px;
			color: white;
			font-size: 16px;
		}
		.part{
			width: 100%;
			background: white;
			border-radius: 8px;
			margin-bottom: 24px;
			.title{
				padding: 16px 12px 12px;
				box-sizing: border-box;
				font-weight: bold;
			}
			.forms{
				width: 100%;
				.line{
					padding: 12px;
					box-sizing: border-box;
					border-bottom: 1px solid #E9E9E9;
					.lineTit{
						// font-weight: bold;
						width: 22%;
						text-align: left;
						margin-right: 10px;
					}
					.lineVal{
						flex: 1;
						.tx{
							width: 40px;
							height: 40px;
							image{
								width: 40px;
								height: 40px;
								border-radius: 50%;
							}
						}
						.ipt{
							flex: 1;
							input{
								text-align: right;
							}
						}
						.rightIcon{
							width: 16px;
							margin-left: 4px;
						}
					}
				}
				.line:last-child{
					border: none;
				}
			}
			.imgs{
				width: 100%;
				padding: 12px;
				box-sizing: border-box;
				.upTool{
					width: 75px;
					height: 75px;
					margin-right:0;
				}
				.imgOne{
					width: 75px;
					height: 75px;
					border-radius: 4px;
					margin-right: 8px;
					margin-bottom: 8px;
					position: relative;
					overflow:hidden;
					image{
						width: 100%;
						height: 100%;
					}
					.del{
						width: 16px;
						height: 16px;
						position: absolute;
						top: 0;
						right: 0;
						image{
							width: 100%;
							height: 100%;
						}
					}
				}
				.imgOne:nth-child(4n + 4){
					margin-right: 0;
				}
			}
		}
	}
</style>
